import React, { Component, Fragment } from 'react';
import { Card, Table, Button, Modal, Form, Select, message } from 'antd';
import Iaxios from './../../axios';
import Utils from './../../utils/utils';
import './../../mocker/index.js';

const FormItem = Form.Item;
const Option = Select.Option;

class City extends Component {
	formRef = React.createRef();
	state = {
		list: [],
		pagination: null,
		isShow: false
	}
	params = {
		page: 1
	}
	componentDidMount(){
		this.requestList()
	}
	//默认请求接口数据
	requestList = () => {
		Iaxios.requestList(this, '/test1', this.params,true)
//		Iaxios.ajax({
//			url: '/test1',
//			method: 'post',
//			data: {
//				page: this.params.page
//			}
//		}).then((res)=>{
//			console.log(res);
//			this.setState({
//				list: res.result.list.map((item, index) => {
//					item.key = index;
//					return item
//				}),
//				pagination: Utils.pagination(res,(current)=>{
//					this.params.page = current;
//					this.requestList();
//				})
//			})
//		})
	}
	//开通城市
	handleOpenCity = () => {
		this.setState({
			isShow: true
		})
	}
	handleSubmit = () => {
		console.log(this.formRef.current.getFieldsValue());
		this.setState({isShow: false})
	}
	onFinish = values => {
		console.log(values);
		message.success('开通成功')
		this.setState({isShow: false})
	}
	render(){
		const columns = [
			{
				title: '城市id',
				dataIndex: 'id'
			},
			{
				title: '城市名称',
				dataIndex: 'name'
			},
			{
				title: '用车模式',
				dataIndex: 'mode',
				render: mode => {
					return mode === 1 ? '停车点': '禁停区';
				}
			},
			{
				title: '营运模式',
				dataIndex: 'op_mode',
				render: mode => {
					return mode === 1 ? '自营': '加盟';
				}
			},
			{
				title: '授权加盟商',
				dataIndex: 'franchisee_name'
			},
			{
				title: '城市管理员',
				dataIndex: 'city_admins',
				render: arr => {
					return arr.map((item)=>{
						return item.user_name
					}).join(',');
				}
			},
			{
				title: '城市开通时间',
				dataIndex: 'open_time'
			},
			{
				title: '操作时间',
				dataIndex: 'update_time',
				render: Utils.formateDate
			},
			{
				title: '操作人',
				dataIndex: 'sys_user_name'
			},
		]
		const layout = {
			labelCol: {
				span: 6,
			},
			wrapperCol: {
				span: 10,
			},
		};
		const tailLayout = {
			wrapperCol: {
				offset: 6,
				span: 18,
			},
		};
		return (
			<Fragment>
				<Card>
				
				</Card>
				<Card style={{ width: '100%'}}>
					<Button type="primary" onClick={this.handleOpenCity}>开通</Button>
				</Card>
				<div className="content-wrap">
					<Table
						columns = { columns }
						dataSource = { this.state.list }
						pagination = { this.state.pagination }
					/>
				</div>
				<Modal 
					title="开通城市"
					okText="好了"
					visible={this.state.isShow}
					onCancel={()=>{
						this.setState({isShow: false})
					}}
					onOk={this.handleSubmit}
				>
					<Form
						ref={this.formRef}
						{...layout}
						onFinish={this.onFinish}
					>
						<FormItem name="name" label="选择城市">
							<Select>
								<Option value="1">北京</Option>
								<Option value="2">上海</Option>
								<Option value="3">深圳</Option>
							</Select>
						</FormItem>
						<FormItem name="op_mode" label="营运模式">
							<Select>
								<Option value="1">自营</Option>
								<Option value="2">加盟</Option>
							</Select>
						</FormItem>
						<FormItem name="mode" label="用车模式">
							<Select>
								<Option value="1">指定停车点</Option>
								<Option value="2">禁停区</Option>
							</Select>
						</FormItem>
						<FormItem {...tailLayout}>
							<Button type="primary" htmlType="submit">好了</Button>
						</FormItem>
					</Form>
				</Modal>
			</Fragment>
		)
	}
}

export default City;